<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Typography 排版 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-md-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            标题
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-content e-section-content--solid">
                            <div class="row">
                                <div class="col-md-6">
                                    <h1>h1. 标题 1</h1>
                                    <div class="e-space-10"></div>
                                    <h2>h2. 标题 2</h2>
                                    <div class="e-space-10"></div>
                                    <h3>h3. 标题 3</h3>
                                    <div class="e-space-10"></div>
                                    <h4>h4. 标题 4</h4>
                                    <div class="e-space-10"></div>
                                    <h5>h5. 标题 5</h5>
                                    <div class="e-space-10"></div>
                                    <h6>h6. 标题 6</h6>
                                </div>
                                <div class="col-md-6">
                                    <h1 class="e-font-success">h1. 标题 1</h1>
                                    <div class="e-space-10"></div>
                                    <h2 class="e-font-info">h2. 标题 2</h2>
                                    <div class="e-space-10"></div>
                                    <h3 class="e-font-warning">h3. 标题 3</h3>
                                    <div class="e-space-10"></div>
                                    <h4 class="e-font-danger">h4. 标题 4</h4>
                                    <div class="e-space-10"></div>
                                    <h5 class="e-font-primary">h5. 标题 5</h5>
                                    <div class="e-space-10"></div>
                                    <h6 class="e-font-brand">h6. 标题 6</h6>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        使用<code>small.text-muted</code>的辅助标题
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <h3>
                                Java
                                <small class="text-muted">最好的语言</small>
                            </h3>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        大标题
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <h3 class="display-1">标题 1</h3>
                            <h3 class="display-2">标题 2</h3>
                            <h3 class="display-3">标题 3</h3>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        添加<code>.lead</code>可突出显示文字
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <p>Java 是世界最好的语言</p>
                            <p class="lead">
                                这是要突出显示的文字
                            </p>
                            <p>Java 是世界最好的语言</p>
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            字体
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        HTML5元素
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <p>
                                你可以使用<code>mark</code>标签实现
                                <mark>高亮</mark>
                                文字
                            </p>
                            <p>
                                <del>带删除线的文本</del>
                            </p>
                            <p>
                                <ins>带下划线的文本</ins>
                            </p>
                            <p><small>比正常尺寸略小的文本</small></p>
                            <p><strong>加粗的文本</strong></p>
                            <p><em>斜体的文本</em></p>
                            <p><abbr title="这里是帮助提示文字">帮助</abbr></p>
                        </div>
                    </div>

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        引用内容
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <div class="e-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
                                <div class="e-demo-preview">
                                    <blockquote class="blockquote">
                                        <p class="mb-0">
                                            Java 是世界上最好的语言
                                        </p>
                                        <footer class="blockquote-footer">
                                            <cite title="Source Title">Java 程序猿</cite>
                                        </footer>
                                    </blockquote>

                                    <blockquote class="blockquote">
                                        <p class="mb-0">
                                            楼上在胡扯
                                        </p>
                                        <footer class="blockquote-footer">
                                            <cite title="Source Title">PHP 程序猿</cite>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">分块</h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-title">
                            标题
                        </div>
                        <div class="e-section-desc">
                            简介
                        </div>
                        <div class="e-section-content">
                            Java 是世界上最好的语言。Java 是世界上最好的语言。Java 是世界上最好的语言。Java 是世界上最好的语言。Java 是世界上最好的语言。
                        </div>
                    </div>

                    <div class="e-section">
                        <div class="e-section-desc">
                            带背景色
                        </div>
                        <div class="e-section-content e-section-content--solid">
                            Java 是世界上最好的语言。Java 是世界上最好的语言。Java 是世界上最好的语言。Java 是世界上最好的语言。Java 是世界上最好的语言。
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-md-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            文本
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        你可以使用<code>e-font-bold</code>、<code>e-font-bolder</code>、<code>e-font-boldest</code>、<code>e-font-boldest</code>实现不同的字重；
                        如果你想让字母大写可以添加<code>e-font-transform-u</code>
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <p><span>Example text</span></p>
                            <p><span class="e-font-bold">Example bold text</span></p>
                            <p><span class="e-font-bolder">Example bolder text</span></p>
                            <p><span class="e-font-boldest">Example boldest text</span></p>
                            <p><span class="e-font-transform-u">Example uppercase text</span></p>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        你可以使用<code>e-font-*</code>使文字表现不同的状态
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <p><span class="e-font-success">Success state text</span></p>
                            <p><span class="e-font-info">Info state text</span></p>
                            <p><span class="e-font-warning">Warning state text</span></p>
                            <p><span class="e-font-danger">Danger state text</span></p>
                            <p><span class="e-font-primary">Primary state text</span></p>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            链接
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        你可以使用<code>e-font-bold</code>、<code>e-font-bolder</code>、<code>e-font-boldest</code>、<code>e-font-boldest</code>class实现不同的字重；
                        如果你想让字母大写可以添加<code>e-font-transform-u</code>class
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <p><a href="#" class="e-link">Example link</a></p>
                            <p><a href="#" class="e-link e-font-bold">Example bold link</a></p>
                            <p><a href="#" class="e-link e-font-bolder">Example bolder link</a></p>
                            <p><a href="#" class="e-link e-font-boldest">Example boldest link</a></p>
                            <p><a href="#" class="e-link e-font-transform-u">Example uppercase link</a></p>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Section-->
                    <div class="e-section">
                    <span class="e-section-info">
                        你可以使用<code>e-link-*</code>使链接表现不同的状态
                    </span>
                        <div class="e-section-content e-section-content--solid">
                            <p><a href="#" class="e-link e-link-success">Success state</a></p>
                            <p><a href="#" class="e-link e-link-info">Info state</a></p>
                            <p><a href="#" class="e-link e-link-warning">Warning state</a></p>
                            <p><a href="#" class="e-link e-link-danger">Danger state</a></p>
                            <p><a href="#" class="e-link e-link-primary">Primary state</a></p>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            分隔线
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section">

                        <span class="e-section-info">
                            使用实线
                        </span>
                        <div class="e-section-content">
                            <div class="e-separator"></div>
                        </div>

                        <span class="e-section-info">
                            你可以添加<code>e-separator--dashed</code>设置虚线效果
                        </span>
                        <div class="e-section-content">
                            <div class="e-separator e-separator--dashed"></div>
                        </div>

                        <span class="e-section-info">
                            你可以添加<code>e-separator--border-2x</code>加粗线条
                        </span>
                        <div class="e-section-content">
                            <div class="e-separator e-separator--dashed e-separator--border-2x"></div>
                        </div>

                        <span class="e-section-info">
                            你可以添加<code>e-separator--sm</code>、<code>e-separator--md</code>、<code>e-separator--lg</code>设置不同间隔大小
                        </span>
                        <div class="e-section-content">
                            <div class="e-separator e-separator--dashed e-separator--border-2x"></div>

                            <div class="e-separator e-separator--dashed e-separator--border-2x e-separator--sm"></div>

                            <div class="e-separator e-separator--dashed e-separator--border-2x e-separator--md"></div>

                            <div class="e-separator e-separator--dashed e-separator--border-2x e-separator--lg"></div>
                        </div>

                        <span class="e-section-info">
                            中间带文字的分割线
                        </span>
                        <div class="e-section-content">
                            <div class="e-separator e-separator--divider">
                                <span></span>
                                <span>or</span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>
            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>